<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="nav-bar">
			<uni-icons type="back" size="28" color="#fff" @click="goBack" />
			<text class="title">加油站详情</text>
			<view class="right-icons"></view>
		</view>

		<!-- 加油站基本信息 -->
		<view class="station-card">
			<image :src="stationInfo.img" class="station-img" mode="aspectFill" />
			<view class="station-info">
				<view class="station-name">{{ stationInfo.name }}</view>
				<view class="station-address">
					<uni-icons type="location" size="16" color="#666"></uni-icons>
					<text>{{ stationInfo.address }}</text>
				</view>
				<view class="station-distance">
					<uni-icons type="map" size="16" color="#666"></uni-icons>
					<text>距离您 {{ stationInfo.distance }}km</text>
				</view>
			</view>
		</view>

		<!-- 油价信息 -->
		<view class="price-card">
			<view class="card-title">油价信息</view>
			<view class="price-list">
				<view class="price-item" v-for="(price, type) in oilPrices" :key="type">
					<view class="oil-type">{{ type }}</view>
					<view class="price">¥{{ price }}</view>
				</view>
			</view>
		</view>

		<!-- 营业信息 -->
		<view class="business-card">
			<view class="card-title">营业信息</view>
			<view class="business-info">
				<view class="info-item">
					<text class="label">营业时间</text>
					<text class="value">{{ stationInfo.week }}</text>
				</view>
				<view class="info-item">
					<text class="label">联系电话</text>
					<text class="value">{{ stationInfo.phone || '暂无' }}</text>
				</view>
				<view class="info-item">
					<text class="label">支付方式</text>
					<text class="value">{{ stationInfo.paymentMethods || '现金、微信、支付宝' }}</text>
				</view>
			</view>
		</view>

		<!-- 服务设施 -->
		<view class="facilities-card">
			<view class="card-title">服务设施</view>
			<view class="facilities-list">
				<view class="facility-item" v-for="(facility, index) in facilities" :key="index">
					<uni-icons :type="facility.icon" size="24" color="#2e8bff"></uni-icons>
					<text>{{ facility.name }}</text>
				</view>
			</view>
		</view>

		<!-- 底部操作栏 -->
		<view class="bottom-bar">
			<button class="nav-btn" @click="toNavigation">
				<uni-icons type="map" size="20" color="#fff"></uni-icons>
				<text>导航</text>
			</button>
			<button class="call-btn" @click="makePhoneCall">
				<uni-icons type="phone" size="20" color="#fff"></uni-icons>
				<text>电话</text>
			</button>
		</view>
	</view>
</template>

<script>
	import request from '../../uitls/request';

	export default {
		data() {
			return {
				stationId: '',
				stationInfo: {
					name: '',
					address: '',
					img: '',
					distance: 0,
					latitude: 0,
					longitude: 0,
					week: '',
					phone: '',
					paymentMethods: ''
				},
				oilPrices: {},
				gasTypes: [],
				facilities: [
					{ name: '便利店', icon: 'shop' },
					{ name: '洗车', icon: 'car' },
					{ name: '卫生间', icon: 'home' },
					{ name: '休息室', icon: 'person' }
				]
			}
		},
		onLoad(options) {
			if (options.id) {
				this.stationId = options.id;
				// 如果有传入距离参数，直接使用
				if (options.distance) {
					this.stationInfo.distance = Number(options.distance).toFixed(1);
				}
				this.loadGasTypes();
				this.loadStationInfo();
			}
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			// 加载加油站信息
			loadStationInfo() {
				request({
					url: '/xsc/cheer/' + this.stationId,
					method: 'GET',
					success: (res) => {
						if (res.data.code === 200) {
							// 确保数据正确赋值
							const data = res.data.data;
							this.stationInfo = {
								name: data.name || '',
								address: data.address || '',
								img: data.img || '/static/mp/洗车.png', // 设置默认图片
								distance: this.stationInfo.distance || data.distance || 0, // 优先使用传入的距离
								latitude: data.latitude || 0,
								longitude: data.logitude || 0, // 注意：后端返回的可能是logitude
								week: data.week || '24小时',
								phone: data.phone || '',
								paymentMethods: data.paymentMethods || '现金、微信、支付宝'
							};
							console.log('加油站信息：', this.stationInfo);
							this.loadOilPrices();
						} else {
							uni.showToast({
								title: '获取加油站信息失败',
								icon: 'none'
							});
						}
					},
					fail: (err) => {
						console.error('请求失败：', err);
						uni.showToast({
							title: '网络请求失败',
							icon: 'none'
						});
					}
				});
			},
			// 加载油号类型
			loadGasTypes() {
				request({
					url: '/xsc/gastype/list',
					method: 'GET',
					success: (res) => {
						if (res.data.code === 200) {
							this.gasTypes = res.data.rows;
							this.loadOilPrices();
						}
					}
				});
			},
			// 加载油价信息
			loadOilPrices() {
				request({
					url: '/xsc/gas_cheer_type/list2',
					method: 'GET',
					success: (res) => {
						if (res.data.code === 200) {
							console.log('原始数据：', res.data.rows);
							const prices = {};
							// 直接处理返回的数据
							res.data.rows.forEach(item => {
								// 将stationId转换为数字进行比较
								if (Number(item.gasCheerId) === Number(this.stationId)) {
									// 根据gasTypeId设置对应的油号名称
									let oilType = '';
									switch(Number(item.gasTypeId)) {
										case 1:
											oilType = '92#';
											break;
										case 2:
											oilType = '95#';
											break;
										case 3:
											oilType = '98#';
											break;
										case 4:
											oilType = '柴油#';
											break;
										default:
											oilType = '其他';
									}
									prices[oilType] = item.price;
								}
							});
							this.oilPrices = prices;
							console.log('处理后的油价信息：', this.oilPrices);
						} else {
							uni.showToast({
								title: '获取油价信息失败',
								icon: 'none'
							});
						}
					},
					fail: (err) => {
						console.error('请求失败：', err);
						uni.showToast({
							title: '网络请求失败',
							icon: 'none'
						});
					}
				});
			},
			// 跳转到导航页面
			toNavigation() {
				uni.navigateTo({
					url: '/pages/nearby-gas/navigate/navigate?latitude=' + this.stationInfo.latitude +
						'&longitude=' + this.stationInfo.longitude +
						'&name=' + this.stationInfo.name +
						'&address=' + this.stationInfo.address
				});
			},
			// 拨打电话
			makePhoneCall() {
				if (this.stationInfo.phone) {
					uni.makePhoneCall({
						phoneNumber: this.stationInfo.phone,
						success: () => {
							console.log('拨打电话成功');
						},
						fail: (err) => {
							console.error('拨打电话失败：', err);
							uni.showToast({
								title: '拨打电话失败',
								icon: 'none'
							});
						}
					});
				} else {
					uni.showToast({
						title: '暂无联系电话',
						icon: 'none'
					});
				}
			}
		}
	}
</script>

<style scoped>
	.container {
		/* #ifdef MP-WEIXIN */
		margin-top: 70rpx;
		/* #endif */
		background: linear-gradient(180deg, #2e8bff, #3ca7fa);
		min-height: 100vh;
		background-repeat: no-repeat;
		background-size: 100% 35%;
		padding-bottom: 120rpx;
	}

	.nav-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 40rpx 24rpx 24rpx 24rpx;
	}

	.title {
		color: #fff;
		font-size: 40rpx;
	}

	.right-icons {
		display: flex;
		width: 28px;
	}

	.station-card {
		background: #fff;
		border-radius: 24rpx;
		margin: 24rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
	}

	.station-img {
		width: 100%;
		height: 300rpx;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
	}

	.station-info {
		padding: 10rpx 0;
	}

	.station-name {
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 16rpx;
	}

	.station-address, .station-distance {
		display: flex;
		align-items: center;
		font-size: 28rpx;
		color: #666;
		margin-bottom: 10rpx;
	}

	.station-address text, .station-distance text {
		margin-left: 10rpx;
	}

	.price-card, .business-card, .facilities-card {
		background: #fff;
		border-radius: 24rpx;
		margin: 24rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
	}

	.card-title {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
		color: #333;
	}

	.price-list {
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx;
	}

	.price-item {
		flex: 1;
		min-width: 200rpx;
		background: #f5f7fa;
		padding: 20rpx;
		border-radius: 12rpx;
		text-align: center;
	}

	.oil-type {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 10rpx;
	}

	.price {
		font-size: 36rpx;
		color: #ff5722;
		font-weight: bold;
	}

	.business-info {
		display: flex;
		flex-direction: column;
		gap: 16rpx;
	}

	.info-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10rpx 0;
	}

	.label {
		color: #666;
		font-size: 28rpx;
	}

	.value {
		color: #333;
		font-size: 28rpx;
	}

	.facilities-list {
		display: flex;
		flex-wrap: wrap;
		gap: 30rpx;
	}

	.facility-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 10rpx;
	}

	.facility-item text {
		font-size: 24rpx;
		color: #666;
	}

	.bottom-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: #fff;
		padding: 20rpx 24rpx;
		display: flex;
		gap: 20rpx;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.nav-btn, .call-btn {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10rpx;
		height: 80rpx;
		border-radius: 40rpx;
		font-size: 32rpx;
		color: #fff;
		border: none;
	}

	.nav-btn {
		background: linear-gradient(90deg, #2e8bff, #3ca7fa);
	}

	.call-btn {
		background: linear-gradient(90deg, #ff9800, #ff5722);
	}
</style>